<template>
<div class="photoinfo-container">
    <h3>{{photoinfo.text}}</h3>
    <span class="zuozhe">作者:{{photoinfo.username}}</span>
 <p class="subtitle">
     <span>发表时间:{{photoinfo.passtime}}</span>
     <span>点击:{{photoinfo.up}}</span>
     <!-- <span>{{id}}</span> -->
 </p>
 <hr>

 <!-- 缩放区域 -->

<div class="photo-view">
     <vue-preview :slides="slide1" @close="handleClose"></vue-preview>
</div>


 <!-- 图片内容区域 -->
 <div class="photo-content"></div>

<!-- 评论子组件 -->
<cmt-box></cmt-box> 

</div>



</template>

<script>
import comment from "../subinfo/comment.vue";

export default {
  data() {
    return {
      id: this.$route.params.id,
      photoinfo: {},
      
      slide1: [
        {
          src:
            "https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg",
          msrc:
            "https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg",
          alt: "picture1",
          title: "Image Caption 1",
          w: 1200,
          h: 900
        },
        {
          src:
            "https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg",
          msrc:
            "https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg",
          alt: "picture2",
          title: "Image Caption 2",
          w: 1200,
          h: 900
        }
      ]
    };
  },

  created() {
    this.getphotoinfo();
  },

  methods: {
    handleClose() {
      console.log("close event");
    },

    getphotoinfo() {
      this.$http
        .get("https://www.apiopen.top/satinGodApi?type=1&page=" + this.id)
        .then(res => {
          this.photoinfo = res.body.data[this.id];
          var ff = [
            {
              src: this.photoinfo.thumbnail,
              msrc: this.photoinfo.thumbnail,
              alt: this.photoinfo.soureid,
              title: this.photoinfo.top_commentsName,
              w: 368,
              h: 640
            }
          ];

         this.slide1=this.slide1.concat(ff);
          // console.log(this.slide1);
          // console.log(this.photoinfo);
        });
    }
  },
  components: {
    "cmt-box": comment
  }
};
</script>


<style lang="less" >
.photo-view {
   display: flex;
   justify-content: center;
 


  figure{
    padding: 0;
    margin:10px 0;
    display: flex;
    justify-content: center;
    a{
      display: flex;
    justify-content: center;
    }
  }


 


}

.photoinfo-container {
  h3 {
    text-align: center;
    font-size: 20px;
    margin-top: 15px;
  }
  color: #2266aa;
  padding: 0 5px;
  .zuozhe {
    font-size: 16px;
    color: #8f8f94;
  }
  .subtitle {
    display: flex;
    justify-content: space-between;
  }
}
</style>
